<template>
    <div class="box">
        <div class="box1">
            <div class="child" v-for="(item,index) in nums" :key="index">
                <el-icon>
                            <i class="iconfont" :class="item.icon"></i>
                </el-icon>
                <div class="child1">
                   {{ item.title }} <br>
                   {{ item.num }}
                </div>
            </div>
           
        </div>
       
    </div>
</template>

<script setup>
    const nums=[
        {
            icon:'Calendar',
            title:'总订单',
            num:102400
        },
        {
            title:'总销售额',
            num:102400
        },
        {
            title:'今日订单数',
            num:102400
        },
        {
            title:'今日销售额',
            num:102400
        },
    ]
</script>

<style scoped>
.box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
   
}
 .box1{
    width: 98%;
    height: 100px;
    margin: 10px 10px;
    justify-content: space-evenly;
    display: flex;
    justify-content: space-evenly;
 }
 .child{
     width: 20%;
     height: 100%;
     display: flex;
     background-color: #fff;
     
 }
 .child1{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
 }
 i{
    width: 50px;
    height: 50px;
    color: black;
 }
 :deep(.el-icon){
    color: black;
 }
</style>